<template>
    <div class="calendar-view">
        <day-view :currDay="currDay" v-show="viewType == 0"></day-view>
        <div class="main-content">
            <el-row type="flex" align="middle" class="header">
                <el-col :span="8">
                    <el-button v-if="viewType != 2" @click="listViewClick">列表</el-button>
                    <el-button :class="{'day-view-button': viewType == 0}" v-if="viewType != 1" @click="dayViewClick">日视图</el-button>
                    <el-button class="month-view-button" v-if="viewType != 0" @click="monthViewClick">月视图</el-button>
                </el-col>
                <el-col class="date-title" align="center" :span="8">
                    <template v-if="viewType != 2">
                        <i class="el-icon-caret-left" @click="prevView"></i>
                        {{dateTitle}}
                        <i class="el-icon-caret-right" @click="nextView"></i>
                    </template>
                </el-col>
                <el-col align="right" :span="8">
                    <el-button v-if="viewType != 2" @click="backToday">今天</el-button>
                    <el-button type="primary">新建</el-button>
                </el-col>
            </el-row>
            <day-view :currDay="currDay" class="day-view-in-main" v-if="viewType == 1"></day-view>
            <month-view
                v-show="viewType == 0"
                :month="month"
                :currDay="currDay"
                @dayClick="dayClick"
            ></month-view>
            <list-view v-if="viewType == 2"></list-view>
        </div>
    </div>
</template>

<script>

import moment from 'moment';
import solarLunar from 'solarLunar';
import DayView from './DayView';
import MonthView from './MonthView';
import ListView from './ListView';

export default {
    components: { DayView, MonthView, ListView },
    data() {
        return {
            date: moment(), // 当前时间
            currDay: null, // 当前选中的日期
            month: [], // 时间表格
            viewType: 0 // 0 月、1 日、2 列表
        }
    },
    computed: {
        dateTitle() {
            let format = '';
            if (this.viewType == 0) {
                format = 'YYYY年MM月';
            } else if (this.viewType == 1) {
                format = 'YYYY年MM月DD日';
            }
            return this.currDay.moment.format(format);
        }
    },
    created() {
        this.initView(this.date);
    },
    methods: {
        /**
         * @description 根据传入的日期，初始化日历VIEW
         * @param date Moment
         */
        initView(date) {
            let dayOfMonth = date.date();
            let year = date.year();
            let month = date.month();
            let firstDateOfMonth = moment([year, month, 1]);
            let firstDayOfWeek = firstDateOfMonth.day();

            firstDateOfMonth.add(-firstDayOfWeek, 'days');
            this.month = [];

            for (let i = 0; i < 42; i++) {
                let lunar = solarLunar.solar2lunar(firstDateOfMonth.year(), firstDateOfMonth.month() + 1, firstDateOfMonth.date());
                let cell = {
                    notThisMonth: firstDateOfMonth.month() != month,
                    today: this.date.year() == firstDateOfMonth.year() && this.date.month() == firstDateOfMonth.month() && firstDateOfMonth.date() == this.date.date(),
                    date: firstDateOfMonth.date(),
                    cnDate: lunar.isTerm ? lunar.term : lunar.lDay == 1 ? lunar.monthCn : lunar.dayCn,
                    weekDay: lunar.ncWeek,
                    month: firstDateOfMonth.month() + 1,
                    moment: firstDateOfMonth.clone()
                };
                this.month.push(cell);
                if (firstDateOfMonth.month() == month && firstDateOfMonth.date() == date.date()) {
                    this.currDay = cell;
                }
                firstDateOfMonth.add(1, 'days');
            }
        },
        dayClick(cell) {
            this.currDay = cell;
        },
        listViewClick() {
            this.viewType = 2;
        },
        dayViewClick() {
            this.viewType = 1;
        },
        monthViewClick() {
            this.viewType = 0;
        },
        nextView() {
            let date;
            if (this.viewType == 0) {
                date = this.currDay.moment.clone().add(1, 'months');
            } else if (this.viewType == 1) {
                date = this.currDay.moment.clone().add(1, 'days');
            }
            this.initView(date);
        },
        prevView() {
            let date;
            if (this.viewType == 0) {
                date = this.currDay.moment.clone().add(-1, 'months');
            } else if (this.viewType == 1) {
                date = this.currDay.moment.clone().add(-1, 'days');
            }
            this.initView(date);
        },
        backToday() {
            this.initView(this.date);
        }
    }
}
</script>

<style lang="scss">
@import '../../styles/var.scss';
.calendar-view {
    position: absolute;
    top: 60px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    color: #333;
    background: #fff;
    padding: 26px 30px 15px;
    display: flex;

    .day-view {
        flex: 1;
        @media screen and (max-width: 1350px) {
            display: none;
        }
        @media screen and (min-width: 1600px) {
            flex: 1.8;
        }
        .date-box {
            @media screen and (min-width: 1600px) {
                flex: 2;
                width: 58%;
                margin-left: 18%;
            }
            width: 70%;
            margin-top: 5px;
            margin-left: 10%;
        }
        &.day-view-in-main {
            display: block !important;
            margin-top: 20px;
            .date-box {
                width: 50% !important;
                margin-left: 25% !important;
            }
        }
    }

    .main-content {
        position: relative;
        flex: 3;
        height: 100%;
        padding-top: 30px;
        .header {
            position: absolute;
            top: 0;
            width: 100%;
            .date-title {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                font-weight: bold;
                i {
                    font-size: 14px;
                    color: #ccc;
                    margin: 0 30px;
                    cursor: pointer;
                }
            }
        }
        .day-view-button {
            @media screen and (min-width: 1350px) {
                display: none;
            }
        }
    }
    
    button {
        padding: 7px 19px;
    }
}

</style>